
<!--
 * @Author: cgl
 * @Date: 2023-04-18 15:12:26
 * @LastEditors: cgl
 * @LastEditTime: 2023-09-05 14:16:12
 * @FilePath: \public-health-emergencies-fed:\新放射\新radiation-hygiene-fe\src\views\slide\task.vue
 * @Description:
 *
 * Copyright (c) 2023 by cgl/微盛信息产业有限公司, All Rights Reserved.
-->
<template>
  <el-dialog 
		class="report-content"
		title="查看"
    :visible.sync="dialogVisible"
		v-dialogDrag="true"
    fullscreen
    @close="closeDialog"
	>
    <el-row type="flex" :gutter="10" style="height: 100%;">
      <el-col :span="12">
        <!-- <canvas id="iframe1" width="100%" height="600px"></canvas> -->
        <iframe id="iframe1" :src="recordUrl" width="100%" height="100%" frameborder="0"></iframe>
      </el-col>
      <el-col :span="12">
        <iframe id="iframe2" :src="reportUrl" width="100%" height="100%" frameborder="0"></iframe>
      </el-col>
    </el-row>
	</el-dialog>
</template>

<script>
// 引入PDF.js库
// import PDFJS from 'pdfjs-dist'
const PDFJS = require('pdfjs-dist/webpack');
// 引入深度比较函数（假设有一个实现了deepEqual的库）
import deepEqual from 'deep-equal';
// const deepEqual = require('deep-equal');
import { listOss, listByIds, delOss } from "@/api/system/oss";
export default {
  name: "HistoryRecord",
  data() {
    return {
			dialogVisible: false,

      loading: false,
      recordUrl: '', // 原始记录
      reportUrl: '', // 报告
      pdfDoc: null,
    };
  },
  created() {
  },
  methods: {
		async openDialog(row) {
      let { data:recordUrl } = await listByIds(row.recordOssId)
      let { data:reportUrl } = await listByIds(row.ossId)
      this.recordUrl = recordUrl[0].url
      this.reportUrl = reportUrl[0].url
      console.log(this.recordUrl);
      
			this.dialogVisible = true
		},
    async handleOpenFile(row) {
      let {code, data} = await listByIds(row.recordOssId)
      let url = data[0].url
      this.comparisonUrl= url
      this.comparisonVisible = true
      // this.loadFile(this.primitiveUrl, 'iframe1')
      // this.listenEvent()
      // code == 200 && window.open(url, '', 'pdf')
      // this.comparePdfFiles(this.primitiveUrl, url).then(isEqual => {
      //   console.log('PDF files are equal:', isEqual);
      // });
    },
    async loadFile(url, idStr) {
      this.pdfDoc = await PDFJS.getDocument(url).promise
      console.log(this.pdfDoc);
      this.renderPage(1, idStr)
    },
    async renderPage(num, idStr) {
      let page = await this.pdfDoc.getPage(num)
      console.log(page);
      const canvas = document.getElementById(idStr)
      const ctx = canvas.getContext('2d')
      const viewport = page.getViewport({ scale: 1 })
      canvas.width = viewport.width
      canvas.height = viewport.height
      const renderContext = {
          canvasContext: ctx,
          viewport
      }
      page.render(renderContext)
    },
    closeDialog() {
      this.resetForm('queryParams')
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        participantUndertakeTypes: []
      }
    },
    closeAdd() {
      this.resetForm('addParticipantRefs')
    },
  }
};
</script>

<style lang="scss" scoped>
.report-content {
  ::v-deep .el-dialog {
    max-height: 100%;
    .el-dialog__body {
      max-height: unset !important;
      height: calc(100% - 54px);
    }
  }
}
</style>
